<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查询商品</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-default/index.css">
    <link rel="stylesheet" href="../resources/css/index.css">
    <script type="text/javascript" src="../resources/jquery/jquery-2.1.0.min.js"></script>

</head>
<body>
    <div id="itemListApp">
        <div id="itemListToolbar" style="background: #E5E9F2;padding: 3px">
                <el-button icon="plus" ></el-button>
                <el-button type="primary"  icon="edit" ></el-button>
                <el-button type="danger"  icon="delete" >删除</el-button>
                <el-button type="success"  icon="search" >搜索</el-button>
        </div>
        <el-table
                :data="itemListTableData"
                border
                style="width: 100%"
                @selection-change="itemListHandleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="id"
                    label="ID"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="商品名"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="sellPoint"
                    label="卖点"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="price"
                    label="价格"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="num"
                    label="库存数量"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="barcode"
                    label="条形码"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="created"
                    label="创建日期"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="updated"
                    label="更新日期"
                    width="120">
            </el-table-column>
            <el-table-column
                    prop="cid"
                    label="叶子类目"
                    show-overflow-tooltip>
            </el-table-column>
        </el-table>
    </div>
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">
    var itemListVm = new Vue({
        el:'#itemListApp',
        data:{
            itemListTableData: [
                {
                    id:'1',
                    title:'nike'
                }
            ],
            itemListMultipleSelection: [],
            itemListHandleSelectionChange(val) {
                console.log(val)
                this.itemListMultipleSelection = val;
            }
        },

    });


    $.ajax({
        url:'',
        type:'post',
        success:function (data) {
            itemListVm.$data.itemListTableData.append(data);
        }
    })
</script>
</body>
</html>